

import React from 'react';
import sty from './sty.module.css';
import cs from 'classnames';
import { reqBanner } from '@/api/recommend';
import { memo } from 'react';
import { useRef } from 'react';
import { useState } from 'react';
import { useEffect } from 'react';
import { message, Carousel } from 'antd';
import { useCallback } from 'react';

import { downloadPicExeUrl, getBannerBgImage } from '@/utils/format-utils'

const Recommend = () => {
  const bannerRef = useRef(null);
  const [bannerData, setBannerData] = useState([]);
  const [curIdx, setCurIdx] = useState(0);

  useEffect(() => {
    reqBanner().then(res => {
      if (res.code === 200) {
        setBannerData(res.banners)
      }
    }).catch(() => {
      message.error('请求异常')
    })
  }, [])
  const changeIdx = useCallback((form, to) => {
    setCurIdx(to)
  }, [])
  const imgUrl = getBannerBgImage(bannerData[curIdx]);


  return <div className={sty.root} style={{ background: imgUrl }}>
    <div className={cs(sty.banner, 'wrap2')}>
      <Carousel
        ref={bannerRef}
        beforeChange={changeIdx}
        className={sty.left}
      >
        {bannerData.length ? bannerData.map(v => <img src={v.imageUrl}
          key={v.targetId}
          alt=''
        />) : ''}
      </Carousel>
      <div className='downPic' onClick={() => window.open(downloadPicExeUrl)}></div>
      <div className={sty.ctrl}>
        <button className={cs(sty.btn, 'arrow')} onClick={() => bannerRef.current.prev()}></button>
        <button className={cs(sty.btn, 'arrow')} onClick={() => bannerRef.current.next()}></button>
      </div>
    </div>
  </div>
}
export default memo(Recommend)